<template>
  <div class="page">
    <div class="page_filter">
      <el-select v-model="form.roadId" filterable clearable placeholder="选择被考核单位" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>

      <el-select v-model="form.grade" clearable placeholder="选择状态">
        <el-option
          v-for="item in EnumGradeTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <!-- table -->
      <el-table
        :data="tableList"
        @expand-change="detailRow" :row-key='getRowKeys' :expand-row-keys="expands"
        border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 路段表单 -->
            <el-table :data="scope.row.children || []" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex2(scope.$index)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                min-width="100"
                label="核查名称">
              </el-table-column>
              <el-table-column
                prop="becheckUnitName"
                label="被考核单位">
              </el-table-column>
              <el-table-column
                width="120"
                sortable
                prop="finalScore"
                label="得分">
                <template slot-scope="scope">
                  {{scope.row.finalScore?scope.row.finalScore + '分':'待考核'}}
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                sortable
                prop="grade"
                label="等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.gradeName | gradeNameColor" class="s-white notice_type">
                    {{scope.row.gradeName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" width="180" label="考核时间">
                <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
                width="120">
                <template slot-scope="scope">
                  <button type="text"
                          class="btn_edit"
                          @click="checkDetail(scope.row)">
                    查看详情
                  </button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          min-width="100"
          label="核查名称">
        </el-table-column>
        <el-table-column
          prop="checkUnitName"
          label="考核单位">
        </el-table-column>
        <el-table-column
          prop="becheckUnitName"
          label="被考核单位">
        </el-table-column>
        <el-table-column
          width="120"
          sortable
          prop="finalScore"
          label="得分">
          <template slot-scope="scope">
            {{scope.row.finalScore?scope.row.finalScore + '分':'待考核'}}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          sortable
          prop="grade"
          label="等级">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.gradeName | gradeNameColor" class="s-white notice_type">
              {{scope.row.gradeName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" width="180" label="考核时间">
          <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
        </el-table-column>

      </el-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="考核详情"
      :visible.sync="isShowDetailDialog"
      width="800px">
      <h2 style="font-size: 20px;color:#1990FE;margin-bottom: 30px">{{detail.becheckUnitName}}单位，总体考核得分:{{detail.finalScore}}分，考核等级：{{detail.gradeName}}</h2>
      <el-tabs v-model="activeName"  tab-position="left">
        <el-tab-pane v-bind:key="item.id" v-for="item in detail.assessmentList" :label="item.name" :name="item.name">
          <span style="color: #1990FE;margin-left: 20px;font-size: 16px">应得：{{item.score}}分,实得：{{item.returnScore}}分</span>
          <el-collapse v-model="activeCollapseName" accordion>
            <el-collapse-item v-bind:key="item2.id" v-for="item2 in item.item" :name="item2.name">
              <template slot="title">
                <el-popover
                  placement="top-start"
                  title="考核内容及评价标准"
                  width="250"
                  trigger="hover"
                  :content="item2.standard">
                  <i slot="reference" class="header-icon el-icon-info"></i>
                </el-popover>
                <span style="color: #1990FE">{{item2.name}}</span>
                <span style="color: red;margin-left: 20px">应得：{{item2.score}}分,实得：{{item2.returnScore}}分</span>
              </template>
              <ul>
                <li v-bind:key="item3.id" v-for="item3 in item2.item">
                  <i  size="25px" class="el-icon-document-checked"></i><span>{{item3.name}}</span><span style="color: red">{{item3.returnScore}}</span>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>

</template>

<script>
  import Enums from '@/utils/enums'
import Format from '@/utils/format'
import {
  getAssessmentList,
  getAssessmentShiGongList
} from '@/services/model/investigation'
import ItemMixins from "./modules/item.mixins";

export default {
  mixins: [ItemMixins,Enums],
  data() {
    return {
      getRowKeys(row) {
        return row.id
      },
      activeName: '',
      activeCollapseName: '',
      timer: '',
      dataType: 'slope',
      detail: {
        assessmentList: []
      },
      expands: [],
      // 替换字段
      defaultProps: {
        children: 'subMenu',
        label: 'name'
      },
      // 表单
      form: {
        page: 1,
        pageSize: 15
      },
      tableList: [],
      EnumGradeTypeList: [],
      isShowDetailDialog: false,
    }
  },
  filters: {
    gradeNameColor(gradeName) {
      switch (gradeName) {
        case '优':
          return 'color:#0DC26B'
        case '合格':
          return 'color:#0073B7'
        case '不合格':
          return 'color:#e43321'
        default:
          return 'color:#e43321'
      }
    },
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.form.id ? '编辑菜单' : '新增菜单'
    }
  },
  created() {
  },
  mounted() {
    this.getRoadList()
    this.queryList()
    this.queryDictList(['EnumGradeType'],['EnumGradeTypeList']);
  },
  methods: {

    // 查看排查详情信息
    async checkDetail(row) {
      this.detail = JSON.parse(JSON.stringify(row))
      this.activeName = this.detail.assessmentList ? this.detail.assessmentList[0].name : ''
      this.isShowDetailDialog = true
    },
    // 查看排查详情信息
    async checkInvestigationDetail(row) {
      // console.log(row)
      this.isShowDetailDialog = true
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 获取当前的序号
    getIndex2(index) {
      let param = index + 1
      return param
    },
    // 表格展开时触发
    async detailRow(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (!row.children) {
          const {data} = await getAssessmentShiGongList({parentId: row.id})
          row.children = data
        }

        this.expands.push(row.id)
      } else {
        this.expands = []
      }
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },

    // 数据查询
    async queryList() {
      const res = await getAssessmentList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    }
  }
}
</script>
<style lang="less">
  .el-collapse-item__content{
    color:#616161;
    background-color: #f2f2f2;
  }
  .el-popper {
  padding: 10px;
}

  .el-collapse-item {
    border-bottom: 2px solid #1990FE;
  }

  .el-table__expanded-cell {
    padding-left: 20px;
    padding-right: 180px !important;
  }

  .page_header {
    padding: 10px 40px;
    background-color: #EEF4FF;
    color: #6680C1;

    & > em {
      padding-left: 20px;
    }

    .page_header-wrap {
      width: 70vw;
      display: flex;

      & > div {
        padding-left: 20px;
      }
    }
  }

  /deep/ .menu_tree {
    padding: 0 40px 40px;
    border-radius: 8px;

    .el-tree-node__content {
      height: 40px;
      border-bottom: 1px solid #3cc891;
    }

    .menu_node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .menu_node-label {
        // width: 300px;
        // flex-shrink: 0;
      }

      .menu_node-content {
        display: flex;
        width: 70vw;
      }
    }
  }

  .s-white {
    color: #FFFFFF;
  }
  .el-tabs__item.is-active {
    color: white;
    font-size: 16px;
    background-color: #1990FE;
  }

  .change-type {
    margin-bottom: 20px;

    .el-radio-group {
      font-size: 0;
      border-radius: 5px;
      box-shadow: 0 0 5px 3px rgb(43 115 175);
    }
  }
</style>
